<template>
  <div class="iframe">
    <div class="i-title">
      <h3>ref 响应式变化</h3>
    </div>
    <div class="i-tip">
      {{tip}}
    </div>
    <div class="i-tip">
      响应式值：{{num}}
    </div>
  </div>
</template>

<script>
  import {
    ref,
    onMounted
  } from 'vue'
  export default {
    setup() {
      let str = ref("源于 setup 执行后");
      let num = ref(0);
      setInterval(() => {
        num.value++;
      }, 1000)
      onMounted(() => {
        console.log("onMounted");
        str.value = "源于 onMounted 执行后"
      })
      return {
        tip: str,
        num: num
      };
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
